:root {
  --page-background: #fef5e7;

/* 窗户部分参数 */
  --window-day-bgc: #d6eaf8;
  --window-square-height: 40;
  --window-square-width: 40;
  --window-top-height: 45;
  --window-top-width: 40;
  --floor-line-height: 1;
  --floor-line-width: 80;
  --innner-line-vt-height: 62;

/* 植物部分用到的参数 */
  --plant-one-height: 6;
  --plant-one-width: 9;
  --plant-one-color: #ba4a00;
  --plant-two-color: #eb8fbb;
  --plant-two-shadow-height: .5;
  --plant-two-shadow-width: 4;

/* 蓝花参数 */
  --flower-blue-leaf-height: 6;
  --flower-blue-leaf-width: 3;
  --flower-blue-line-height: .2;
  --flower-blue-line-width: 5;
  --flower-two-blue-height: 7;
  --flower-two-blue-width: 4.5;

/* 茎 */
  --root-height: 10;
  --root-width: 33;

/* 叶子部分需要的参数 */
  --main-leaf-height: 8;
  --main-leaf-width: 8;

/* 云彩部分用到的参数 */
  --cloud-base-height: 8;
  --cloud-base-width: 17;
  --cloud-ball-height: 5;
  --cloud-ball-width: 5;

/* 灯部分用到的参数 */
  --lamp-height: 15;
  --lamp-width: 19;
  --lamp-wire-height: 70;
  --lamp-wire-width: .1;

/* 星星部分用到的参数 */
  --star-height: 1.2;
  --star-width: 1.2;

/* 月亮部分需要的参数 */
  --moon-height: 10;
  --moon-width: 10;

/* 灯光部分需要的参数 */
  --light-source-height: 20;
  --light-source-width: 18.5;
}

/* 页面主题背景 位置 */
body {
  position: fixed;
  top: 55%;
  left: 50%;

  background-color: var(--page-background);

  transform: translate(-50%, -50%);
}

/* 窗户 */
.window-square {
  width: calc(var(--window-square-width) * 1vmin);
  height: calc(var(--window-square-height) * 1vmin);

  background-color: var(--window-day-bgc);
}

.window-top {
  position: fixed;
  top: calc(var(--window-top-height) * -.5vmin);

  width: calc(var(--window-top-width) * 1vmin);
  height: calc(var(--window-top-height) * 1vmin);

  border-radius: 50%;
  background-color: var(--window-day-bgc);
}

/* 窗框线 */
.inner-line-hz-one,
.inner-line-hz-two,
.inner-line-hz-three {
  position: fixed;

  width: calc(var(--window-square-width) * 1vmin);
  height: .2vmin;

  background-color: #aaa;
}

.inner-line-hz-one {
  bottom: calc(var(--window-square-height) / 3 * 1vmin);
}

.inner-line-hz-two {
  bottom: calc(var(--window-square-height) / 3 * 2vmin);
}

.inner-line-hz-three {
  bottom: calc(var(--window-square-height) * 1vmin);
}

.floor-line {
  position: fixed;
  bottom: 0;
  left: -50%;

  width: calc(var(--floor-line-width) * 1vmin);
  height: .3vmin;

  background-color: #aaa;
}

.inner-vt-line {
  position: fixed;
  bottom: .3vmin;
  left: calc(var(--window-square-width) * .5vmin);

  width: .2vmin;
  height: calc(var(--innner-line-vt-height) * 1vmin);

  background-color: #aaa;
}

/* 植物 */
.plant-one {
  position: fixed;
  right: -8%;
  bottom: 0;

  width: calc(var(--plant-one-width) * 1vmin);
  height: calc(var(--plant-one-height) * 1vmin);

  border-radius: 15%;
  background: linear-gradient(to bottom, #000 5%, var(--plant-one-color) 10%);

  clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 100%);
}

.plant-two {
  position: fixed;
  z-index: 999;
  right: -12%;
  bottom: -5.2%;

  width: calc(var(--plant-one-width) / 2 * 1vmin);
  height: calc(var(--plant-one-height) / 1.5 * 1vmin);

  border-radius: 10%;
  background: linear-gradient(to bottom, #000 5%, var(--plant-two-color) 10%);

  clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 100%);
}

.plant-two-shadow {
  position: fixed;
  right: -15%;
  bottom: -4.9%;

  width: calc(var(--plant-two-shadow-width) * 1vmin);
  height: calc(var(--plant-two-shadow-height) * 1vmin);

  border-radius: 50%;
  background-color: #000;
  box-shadow: 0 0 1px 0 #000;
}

/* 蓝花 */
.flower-blue-leaf {
  position: fixed;
  right: -14%;
  bottom: 4.5%;

  width: calc(var(--flower-blue-leaf-width) * 1vmin);
  height: calc(var(--flower-blue-leaf-height) * 1vmin);

  border-right: 1px solid #111;
  border-left: 1px solid #111;
  border-radius: 95% 0;
  background: #6e8ce9;

  transform: rotate(185deg);
}

.flower-blue-line {
  position: fixed;
  right: -15%;
  bottom: 10%;

  width: calc(var(--flower-blue-line-width) * 1vmin);
  height: calc(var(--flower-blue-line-height) * 1vmin);

  background: #333;

  transform: rotate(-69deg);
}

.flower-blue-leaf-two {
  position: fixed;
  right: -9%;
  bottom: 5.4%;

  width: calc(var(--flower-two-blue-width) * 1vmin);
  height: calc(var(--flower-two-blue-height) * 1vmin);

  border-right: 1px solid #111;
  border-left: 1px solid #111;
  border-radius: 95% 0;
  background: #6e8ce9;

  transform: rotate(-48deg);
}

.flower-blue-line-two {
  position: fixed;
  right: -10%;
  bottom: 10%;

  width: calc(var(--flower-blue-line-width) * 1vmin);
  height: calc(var(--flower-blue-line-height) * 1vmin);

  background: #333;

  transform: rotate(69deg);
}

.root-one {
  position: fixed;
  z-index: 800;
  right: -48%;
  bottom: 40%;

  width: calc(var(--root-width) * 1vmin);
  height: calc(var(--root-height) * 1vmin);

  border: 1px solid #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50% / calc(var(--root-height) / 6 * 1vmin)
  calc(var(--root-height) * 1vmin) 0 0;

  transform: rotate(-90deg);
}

.root-two {
  position: fixed;
  z-index: 88;
  top: 59%;
  right: -2%;

  width: calc(var(--root-width) / 1.9 * 1vmin);
  height: calc(var(--root-height) * 1vmin);

  border: 1px solid #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 60% / calc(var(--root-height) * 1vmin)
  calc(var(--root-height) / 3.5 * 1vmin) 0 0;

  transform: rotate(69deg);
}

.root-three {
  position: fixed;
  z-index: 88;
  top: 45%;
  right: -7.6%;

  width: calc(var(--root-width) / 1.5 * 1vmin);
  height: calc(var(--root-height) * 1vmin);

  border: 1px solid #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 60% / calc(var(--root-height) * 1vmin)
  calc(var(--root-height) / 14 * 1vmin) 0 0;

  transform: rotate(81deg);
}

.root-four {
  position: fixed;
  z-index: 80;
  top: 17%;
  right: -18%;

  width: calc(var(--root-width) / 2.7 * 1vmin);
  height: calc(var(--root-height) * 1vmin);

  border: 1px solid #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 60% / calc(var(--root-height) * 1vmin)
  calc(var(--root-height) / 8 * 1vmin) 0 0;

  transform: rotate(-85deg);
}

.root-five {
  position: fixed;
  z-index: 88;
  top: 39%;
  right: -38.6%;

  width: calc(var(--root-width) / 1.5 * 1vmin);
  height: calc(var(--root-height) * 1vmin);

  border: 1px solid #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50% / calc(var(--root-height) / 1.45 * 1vmin)
  calc(var(--root-height) * 1vmin) 0 0;

  transform: rotate(-60deg);
}

.root-six {
  position: fixed;
  z-index: 88;
  top: 57%;
  right: -37%;

  width: calc(var(--root-width) / 1.65 * 1vmin);
  height: calc(var(--root-height) * 1vmin);

  border: solid 1px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50% / calc(var(--root-height) / 1.6 * 1vmin)
  calc(var(--root-height) * 1vmin) 0 0;

  transform: rotate(-60deg);
}

.main-leaf-one {
  position: fixed;
  z-index: 50;
  top: 28%;
  right: 8.5%;

  width: calc(var(--main-leaf-width) * 1vmin);
  height: calc(var(--main-leaf-height) * 1vmin);

  border-bottom: .5px solid #111;
  border-left: .5px solid #111;
  border-radius: 85% 5%;
  background: #4d8473;

  transform: rotate(93deg);
}

.main-leaf-two {
  position: fixed;
  z-index: 50;
  top: 48%;
  right: 8.5%;

  width: calc(var(--main-leaf-width) * 1vmin);
  height: calc(var(--main-leaf-height) * 1vmin);

  border-bottom: 1px solid #111;
  border-left: 1px solid #111;
  border-radius: 85% 0;
  background: #4d8473;

  transform: rotate(85deg);
}

.main-leaf-three {
  position: fixed;
  z-index: 50;
  top: 4%;
  right: -7.6%;

  width: calc(var(--main-leaf-width) * 1.3 * 1vmin);
  height: calc(var(--main-leaf-height) * 1.1 * 1vmin);

  border-top: 1px solid #111;
  border-right: 1px solid #111;
  border-radius: 95% 10%;
  background: #4d8473;

  transform: rotate(-35deg);
}

.main-leaf-four {
  position: fixed;
  z-index: 55;
  top: 4%;
  right: -17%;

  width: calc(var(--main-leaf-width) * 1.2 * 1vmin);
  height: calc(var(--main-leaf-height) * 1.3 * 1vmin);

  border-top: 1px solid #111;
  border-right: 1px solid #111;
  border-radius: 85% 5%;
  background: #4d8473;

  transform: rotate(-10deg);
}

.main-leaf-five {
  position: fixed;
  z-index: 55;
  top: 21%;
  right: -24%;

  width: calc(var(--main-leaf-width) * 1vmin);
  height: calc(var(--main-leaf-height) * 1.3 * 1vmin);

  border-top: 1px solid #111;
  border-right: 1px solid #111;
  border-radius: 85% 5%;
  background: #4d8473;

  transform: rotate(18deg);
}

.main-leaf-six {
  position: fixed;
  z-index: 55;
  top: 46%;
  right: -29%;

  width: calc(var(--main-leaf-width) * 1.5 * 1vmin);
  height: calc(var(--main-leaf-height) / 1.2 * 1vmin);

  border-top: 1px solid #111;
  border-right: 1px solid #111;
  border-radius: 95% 0;
  background: #4d8473;

  transform: rotate(-8deg);
}

.cloud-one {
  position: fixed;
  top: 50%;

  width: calc(var(--cloud-base-width) * 1vmin);
  height: calc(var(--cloud-base-height) / 1.2 * 1vmin);

  border-radius: 50%;
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);

  animation: cloud 4s infinite;
}

.cloud-two {
  position: fixed;
  top: 0;
  left: 0;

  width: calc(var(--cloud-base-width) * 1vmin);
  height: calc(var(--cloud-base-height) / 1.3 * 1vmin);

  border-radius: 50%;
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);

  animation: cloud 4s infinite;
}

.cloud-three {
  position: fixed;
  top: -30%;
  right: 5%;

  width: calc(var(--cloud-base-width) * 1.1 * 1vmin);
  height: calc(var(--cloud-base-height) / 1.2 * 1vmin);

  border-radius: 50%;
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);

  animation: cloud 4s infinite;
}

.cloud-ball-one {
  position: fixed;
  z-index: 99;
  top: 48%;

  width: calc(var(--cloud-ball-width) * 1.5 * 1vmin);
  height: calc(var(--cloud-ball-height) * 1.5 * 1vmin);

  border-radius: 50%;
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);

  animation: cloud 4s infinite;
}

.cloud-ball-two {
  position: fixed;
  z-index: 99;
  top: 45%;
  left: 10%;

  width: calc(var(--cloud-ball-width) * 2 * 1vmin);
  height: calc(var(--cloud-ball-height) * 2 * 1vmin);

  border-radius: 50%;
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);

  animation: cloud 4s infinite;
}

.cloud-ball-three {
  position: fixed;
  z-index: 99;
  top: -32%;
  left: 54%;

  width: calc(var(--cloud-ball-width) * 1.3 * 1vmin);
  height: calc(var(--cloud-ball-height) * 1.5 * 1vmin);

  border-radius: 50%;
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);

  animation: cloud 4s infinite;
}

.cloud-ball-four {
  position: fixed;
  z-index: 99;
  top: -35%;
  left: 65%;

  width: calc(var(--cloud-ball-width) * 2 * 1vmin);
  height: calc(var(--cloud-ball-height) * 2 * 1vmin);

  border-radius: 50%;
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);

  animation: cloud 4s infinite;
}

.cloud-ball-five {
  position: fixed;
  z-index: 99;
  top: -3%;
  left: 5%;

  width: calc(var(--cloud-ball-width) * 1.5 * 1vmin);
  height: calc(var(--cloud-ball-height) * 1.5 * 1vmin);

  border-radius: 50%;
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);

  animation: cloud 4s infinite;
}

.cloud-ball-six {
  position: fixed;
  z-index: 99;
  top: -5%;
  left: 15%;

  width: calc(var(--cloud-ball-width) * 2 * 1vmin);
  height: calc(var(--cloud-ball-height) * 2 * 1vmin);

  border-radius: 50%;
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);

  animation: cloud 4s infinite;
}

@keyframes cloud {
  0% {
    transform: translate(0px, 0px);
  }

  25% {
    transform: translate(2px, 2px);
  }

  50% {
    transform: translate(0px, 0px);
  }

  75% {
    transform: translate(-1px, -1px);
  }

  100% {
    transform: translate(0px, 0px);
  }
}

/* 灯 */
.lamp {
  position: fixed;
  z-index: 999;
  top: -31%;
  right: -5%;

  width: calc(var(--lamp-width) * 1vmin);
  height: calc(var(--lamp-height) * 1vmin);

  border-radius: 50%;
  background: linear-gradient(
  to bottom,
  #eb8fbb 42%,
  #000 43%,
  transparent 45%
  );

  cursor: pointer;
}

.lamp-shadow {
  position: fixed;
  z-index: 100;
  top: -38%;
  right: 17.3%;

  width: calc(var(--plant-two-shadow-width) / 3.4 * 1vmin);
  height: calc(var(--lamp-width) / 1.01 * 1vmin);

  border-radius: 90% 50%;
  background: #222;

  transform: rotate(89deg);
}

.lamp-wire {
  position: fixed;
  z-index: 998;
  top: -190%;
  right: 18%;

  width: calc(var(--lamp-wire-width) * 1vmin);
  height: calc(var(--lamp-wire-height) * 1vmin);

  background: #444;
}

/* 夜晚css */
.night {
  background: #120326;
}

.hide-cloud {
  visibility: hidden;
}

.star-one,
.star-two,
.star-three,
.star-four,
.star-five,
.star-six {
  visibility: hidden;

  position: fixed;

  width: calc(var(--star-width) * 1vmin);
  height: calc(var(--star-height) * 1vmin);

  border: 1px solid #eee;
  background: #fff;

  clip-path: polygon(
  50% 0%,
  61% 35%,
  98% 35%,
  68% 57%,
  79% 91%,
  50% 70%,
  21% 91%,
  32% 57%,
  2% 35%,
  39% 35%
  );
}

.star-one {
  top: 50%;
  left: 60%;

  transform: rotate(45deg);
  animation: twinkle 2s infinite linear;
}

.star-two {
  top: 60%;
  left: 20%;

  transform: rotate(80deg);
  animation: twinkle 4s infinite linear;
}

.star-three {
  top: 10%;
  left: 40%;

  transform: rotate(20deg);
  animation: twinkle 2s infinite linear;
}

.star-four {
  top: -40%;
  left: 60%;

  transform: rotate(45deg);
  animation: twinkle 1s infinite linear;
}

.star-five {
  top: 30%;
  left: 20%;

  transform: rotate(45deg);
  animation: twinkle 3s infinite linear;
}

.star-three {
  top: 10%;
  left: 40%;

  transform: rotate(20deg);
  animation: twinkle 2s infinite linear;
}

.star-six {
  top: -10%;
  left: 80%;

  transform: rotate(45deg);
  animation: twinkle 1s infinite linear;
}

@keyframes twinkle {
  0% {
    opacity: 1;
  }

  25% {
    opacity: .3;
  }

  50% {
    opacity: .8;
  }

  75% {
    opacity: .5;
  }

  100% {
    opacity: .8;
  }
}

.show-star,
.show-moon,
.show-light {
  visibility: visible !important;
}

.moon {
  visibility: hidden;

  position: fixed;
  top: -33%;
  left: 13%;

  width: calc(var(--moon-width) * 1vmin);
  height: calc(var(--moon-height) * 1vmin);

  border-radius: 50%;
  background: linear-gradient(-45deg, #fff 40%, #eee 80%);
  box-shadow: 0 0 5px 1px #fff;
}

.light {
  visibility: hidden;

  position: fixed;
  z-index: 900;
  top: -67%;
  right: -20.5%;

  width: calc(var(--light-source-width) * 1vmin);
  height: calc(var(--light-source-height) * 1vmin);

  opacity: .6;
  border-top: 0;
  border-right: calc(var(--lamp-width) / 3 * 1vmin) solid transparent;
  border-bottom: calc(var(--light-source-height) * 2.32 * 1vmin) solid #f9e79f;
  border-left: calc(var(--lamp-width) / 3 * 1vmin) solid transparent;

  animation: twinkle 10s linear infinite;

  filter: brightness(105%);
}
